import React from 'react';
import {Input, Button, Radio} from 'antd';
import classNames from 'classnames';

const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const InputGroup = Input.Group;

class SearchInputContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      type: 'all',
      value: '',
      focus: false,
    };
  }

  handleInputChange(e) {
    this.setState({
      value: e.target.value,
    });
  }

  handleFocusBlur(e) {
    this.setState({
      focus: e.target === document.activeElement,
    });
  }

  handleSearch() {
    if (this.props.onSearch) {
      this.props.onSearch(this.state.value);
    }
    var data = {
      type: this.state.type,
      value: this.state.value,
    }

    this.props.signal.dispatch(data);
  }

  onChange(e) {
    this.setState({
      type: e.target.value,
    })
    var data = {
      type: e.target.value,
      value: this.state.value
    }

    this.props.signal.dispatch(data);
  }

  render() {
    const {style, size, placeholder} = this.props;
    const btnCls = classNames({
      'ant-search-btn': true,
      'ant-search-btn-noempty': !!this.state.value.trim(),
    });
    const searchCls = classNames({
      'ant-search-input': true,
      'ant-search-input-focus': this.state.focus,
    });
    return (
      <div className="ant-search-input-wrapper" style={style}>
        <InputGroup className={searchCls}>
          <Input placeholder={placeholder} value={this.state.value} onChange={this.handleInputChange.bind(this)}
                 onFocus={this.handleFocusBlur.bind(this)} onBlur={this.handleFocusBlur.bind(this)} onPressEnter={this.handleSearch.bind(this)}
          />
          <div className="ant-input-group-wrap">
            <Button icon="search" className={btnCls} size={size} onClick={this.handleSearch.bind(this)}/>
          </div>
        </InputGroup>
        <br/>
        <RadioGroup onChange={this.onChange.bind(this)} defaultValue="all" size="small">
          <RadioButton value="all">全部</RadioButton>
          <RadioButton value="tabNam">表名</RadioButton>
          <RadioButton value="tabRem">表别名</RadioButton>
          <RadioButton value="tabCom">表备注</RadioButton>
        </RadioGroup>
      </div>

    );
  }
}

export default SearchInputContainer;
